<template>
	<Layout class="layout-container mask-all">
		<Spin fix v-if="loading" size="large"></Spin>
		<Content>
			<Layout class="layout-container padding-all">
				<div class="padding-bottom">
		            <Row>
		                <Col span="16">
		                    <ButtonGroup>
		                        <Button 
		                            icon="ios-add-circle-outline"
		                            @click="onAddClicked" v-if="perms.add" :title="button.text.add" />
		                        <Button 
		                            icon="ios-create-outline" 
		                            :disabled="button.disabled" 
		                            @click="onEditClicked" v-if="perms.edit" :title="button.text.edit" />
		                        <Button 
		                            icon="ios-remove-circle-outline" 
		                            :disabled="button.disabled" 
		                            @click="onRemoveClicked" v-if="perms.remove" :title="button.text.remove" />
		                        <Button 
			                        icon="ios-options" 
			                        :disabled="button.disabled" v-if="perms.perm"
			                        @click="onAllocClicked" :title="button.text.perm" />
		                    </ButtonGroup>
		                </Col>
		                <Col span="8">
		                    <Input search 
		                    :enter-button="search.button"
		                    :placeholder="search.placeholder" @on-search="onSearch" />
		                </Col>
		            </Row>
		        </div>
		        <Content ref="container" class="layout-page-container">
		            <Table 
		                ref="selection"
		                border
		                :height="paging.height" 
		                :loading="paging.loading" 
		                :columns="paging.columns" 
		                :data="paging.data"
		                @on-selection-change="onSelectionChange"></Table>
		        </Content>
		        <div class="padding-top">
		            <Page 
		                :current="paging.page"
		                :total="paging.total" 
		                :page-size="paging.pageSize" 
		                show-total
		                show-elevator 
		                show-sizer
		                transfer
		                @on-page-size-change="onPageSizeChange"
		                @on-change="onPageChange" />
		        </div>
			</Layout>
		</Content>
	</Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Page, Row, Col, Icon, Input, Button, ButtonGroup, Table, Spin } from 'view-design';
import { dateRender, perms, fit, confirm, createWindow, each, extend } from 'config/utils';

//分页数据
const URI_DATAGRID = "/security/api/router/datagrid";
//删除
const URI_REMOVE = "/security/api/router/remove";
//添加
const ROUTER_ADD = "sys/router/add";
//编辑
const ROUTER_EDIT = "sys/router/edit";
//分配权限
const ROUTER_PERM = "sys/router/perm";

export default {
	name: "SysRouterManage",
	data() {
		return {
			loading: true,
			search: {
				placeholder: this.$t("info.search.placeholder"),
                button:this.$t("info.search.text"),
                value:""
			},
			perms : {
				add:false,
				edit:false,
				remove:false,
				perm:false
			}, 
			button : {
				disabled:true,
				text: {
					add:this.$t("info.add"),
                    edit:this.$t("info.edit"),
                    remove:this.$t("info.remove"),
                    perm:this.$t("sys.role.title.perms")
				}
			},
			paging:{
				height:200,
				data:[],
				columns:[
				    {
				    	type:'selection',
				     	width: 60,
				    	align: 'center',
				    	fixed: 'left'
				    }, {
				    	type: "html",
			        	key:'name', 
			        	title:this.$t("sys.router.name"), 
			        	width:200
			        }, {
			        	type: "html",
			        	key:'memo',
			        	title:this.$t("sys.memo"), 
			        	minWidth: 300
			        }, {
			        	key:'createtime', 
			        	title:this.$t("sys.createtime"), 
			        	width:170, 
			        	formatter: dateRender
			        }, {
			        	key:'updatetime', 
			        	title:this.$t("sys.updatetime"), 
			        	width:170, 
			        	formatter: dateRender
			        }
				],
				selections:[],
				loading:false,
				page:1,
				pageSize:10,
				total:0
			}
		};
	},
	methods: {

		loadDataGrid() {
			if(!this.paging.loading) {
				this.paging.loading = true;
				this.onSelectionChange([]);
				this.$http.post(URI_DATAGRID, {
					pageNumber: this.paging.page,
					pageSize: this.paging.pageSize,
					search: this.search.value
				}).then((response) => {
					var res = response.data;
					if(res.success) {
						var data = res.data;
						this.paging.total = data.total;
						this.paging.data = data.rows;
					}
					this.paging.loading = false;
				});
			}
		},
		onSearch(value) {
			this.search.value = value;
			this.paging.page = 1;
			this.loadDataGrid();
		},
		onSelectionChange(rows) {
			this.paging.selections = rows;
			this.button.disabled = rows.length == 0;
		},
		onPageChange(page) {
			this.paging.page = page;
			this.loadDataGrid();
		},
        onPageSizeChange(size) {
        	this.paging.page = 1;
            this.paging.pageSize = size;
            this.loadDataGrid();
        },
		onAddClicked() {
			createWindow({
				title: this.$t("sys.router.title.add"),
				router: ROUTER_ADD,
				height: 280,
				callback: () => {
					this.loadDataGrid();
				}
			});
		},
		onEditClicked() {
			var me = this;
			var rows = this.paging.selections;
			createWindow({
				title: this.$t("sys.router.title.edit"),
				router: ROUTER_EDIT,
				params: rows[0],
				height: 280,
				callback: (result) => {
					each(this.paging.data, function() {
						if(this.id == result.id) {
							extend(this, result);
							me.onSelectionChange([]);
							return false;
						}
					});
				}
			});
		},
		onRemoveClicked() {
			var me = this;
			confirm("info.confirm.remove", function(isOk) {
				if(isOk) {
					var rows = me.paging.selections;
					var ids = [];
					each(rows, function() {
						ids.push(this.id);
					});
					me.$http.post(URI_REMOVE, {ids}).then((response) => {
						var res = response.data;
						if(res.success) {
							me.loadDataGrid();
						}
						this.remove();
					});
					return false;
				}
			}, true);
		},
		onAllocClicked() {
			var me = this;
			var rows = this.paging.selections;
			createWindow({
				title: this.$t('sys.router.title.perm'),
				router: ROUTER_PERM,
				params: rows[0],
				callback: (result) => {
					each(this.paging.data, function() {
						if(this.id == result.id) {
							extend(this, result);
							return false;
						}
					});
				}
			});
		}
	},
	mounted() {
		var params = {
			add:"sys:router:manager:add",
			edit:"sys:router:manager:edit",
			remove:"sys:router:manager:remove",
			perm:"sys:router:manager:perm"
		};
		//获取权限
		perms(params, (isOk, data) => {
			if(isOk) {
				this.perms = data;
			}
			this.loadDataGrid();
			this.loading = false;
		});
		this.$nextTick(() => {
            //列表自适应高度
            fit(this.$refs.container, this.paging);
        });
	},
	components: {
		Layout,
		Content,
        Page,
        Row,
        Col,
        Input,
        Button,
        ButtonGroup,
        Table,
        Spin,
        Icon
	}
}
</script>